<div class="demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 60, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="demo-example" [dAnchor]="'basic-usage'">
    <div class="demo-title">{{ 'components.datepicker-pro.basicDemo.title' | translate }}</div>
    <d-codebox [sourceData]="BasicSource">
      <d-basic-datepicker-pro demo></d-basic-datepicker-pro>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'show-time'">
    <div class="demo-title">{{ 'components.datepicker-pro.showTimeDemo.title' | translate }}</div>
    <d-codebox [sourceData]="showTimeSource">
      <d-show-time-datepicker-pro demo></d-show-time-datepicker-pro>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'template'">
    <div class="demo-title">{{ 'components.datepicker-pro.templateDemo.title' | translate }}</div>
    <d-codebox [sourceData]="templateSource">
      <d-datepicker-pro-template demo></d-datepicker-pro-template>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'monthYear'">
    <div class="demo-title">{{ 'components.datepicker-pro.monthYearDemo.title' | translate }}</div>
    <d-codebox [sourceData]="monthYearSource">
      <d-month-year-datepicker-pro demo></d-month-year-datepicker-pro>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'range-picker'">
    <div class="demo-title">{{ 'components.datepicker-pro.rangePickerDemo.title' | translate }}</div>
    <d-codebox [sourceData]="rangeTypeSource">
      <d-range-type-picker demo></d-range-type-picker>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'range-template'">
    <div class="demo-title">{{ 'components.datepicker-pro.rangeTemplateDemo.title' | translate }}</div>
    <d-codebox [sourceData]="rangeTemplateSource">
      <d-range-template-picker demo></d-range-template-picker>
    </d-codebox>
  </div>

  <div class="demo-example" [dAnchor]="'host-template'">
    <div class="demo-title">{{ 'components.datepicker-pro.hostTemplateDemo.title' | translate }}</div>
    <d-codebox [sourceData]="hostTemplateSource">
      <d-datepicker-pro-host demo></d-datepicker-pro-host>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'datepicker-pro-static-panel'">
    <div class="devui-demo-title">{{ 'components.datepicker-pro.static-panelDemo.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="components-datepicker-pro-static-panel" [sourceData]="DatepickerProDemoStaticPanel">
      <d-demo-datepicker-pro-static-panel demo></d-demo-datepicker-pro-static-panel>
    </d-codebox>
  </div>

  <div class="devui-demo-example" [dAnchor]="'select-type'">
    <div class="devui-demo-title">{{ 'components.datepicker-pro.select-type.title' | translate }}</div>
    <div class="devui-demo-text"></div>
    <d-codebox id="select-type" [sourceData]="SelectDatepickerProDemo">
      <d-demo-select-datepicker demo></d-demo-select-datepicker>
    </d-codebox>
  </div>
</div>
